<template>
	<view v-if="empty">
		购物车空空如也
	</view>
	<view v-else>
		<view class="cartList">
			<uni-swipe-action>
				<uni-swipe-action-item
					:threshold="0"
					:right-options="options1"
					@click="deleteItem(item.cartid)"
					v-for="item of cartList" :key="item.cartid"
				>
					<view class="item" >
						<view class="itemImage">
							<checkbox-group @change="changeSelectOne(item)">
								<checkbox :checked="item.flag"  />
							</checkbox-group>
							<image :src="item.img1" mode=""></image>
						</view>
						<view class="itemInfo">	
							<view class="proname">{{ item.proname }}</view>
							<view class="itemInfoOther">		
								<view style="flex: 1">{{ item.originprice }}</view>
								<button class="numBtn" :disabled="item.num <= 1" @click="reduce(item)">-</button>
								<view style="min-width: 30px;" >{{ item.num }}</view>
								<button class="numBtn" @click="add(item)">+</button>
							</view>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
		<view class="tip">
			<checkbox-group  @change="changeSelect">
				<checkbox :checked="checked" />全选
			</checkbox-group>
			<view >
				{{ totalNum }} - {{ totalPrice }}
			</view>
			<button :disabled="totalNum === 0" @click="addOrder">提交订单</button>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	import { onShow } from '@dcloudio/uni-app'
	import { getCartListData, removeCartData, selectAllData, updateNum, selectOneData } from '../../api/cart';
	import { addOrderFn } from '../../api/order'
	const empty = ref(true)
	const cartList = ref([])
	const options1 = ref([{
		text: '删除',
		style: {
			backgroundColor: 'rgb(255,58,49)'
		}
	}])
	const checked = ref(false)
	const changeSelectOne = (item) => {
		
			item.flag = !item.flag
			console.log(item.flag)
			selectOneData({
				cartid: item.cartid,
				flag: item.flag
			}).then(() => { getCartList() })
		}
	
	//全选 、 全不选
	const changeSelect = (e) => {
		checked.value = !checked.value
		selectAllData({
			userid: uni.getStorageSync('userid'),
			type: checked.value
		}).then(() => { getCartList() })
	}
	const reduce = (item) => {
		item.num -= 1
		updateNum({cartid: item.cartid, num: item.num}).then(() => {
			getCartList()
		})
	}
	const add = (item) => {
		item.num += 1
		updateNum({cartid: item.cartid, num: item.num}).then(() => {
			getCartList()
		})
	}
	const getCartList = () => {
		getCartListData({ userid: uni.getStorageSync('userid')}).then((res) => {
			if(res.data.code === '10020') {
				cartList.value = []
				empty.value = true
			} else {
				cartList.value = res.data.data
				empty.value = false
				checked.value = cartList.value.every(item => item.flag)
			}
		})
	}
	const deleteItem = (cartid) => {
		removeCartData({ cartid }).then(res => {
			getCartList()
		})
	}
	
	onShow(() => {
		getCartList()
	})
	
	const totalPrice = computed(() => {
		return cartList.value.reduce((sum, item) => {
			return item.flag ? sum + item.num * item.originprice : sum + 0
		}, 0)
	})
	const totalNum = computed(() => cartList.value.reduce((sum, item) => {
		return item.flag ? sum + item.num : sum + 0
	},0))
	const addOrder = () => {
			addOrderFn({
				userid: uni.getStorageSync('userid')
			}).then(res => {
				console.log(res.data)
				uni.navigateTo({
					url: "/pages/order/order?time=" + res.data.time
				})
			})
		}
</script>

<style>
.cartList {}
.cartList .item { 
	display: flex;
}
.cartList .item .itemImage {
	width: 100px;
	height: 100px;
	-webkit-box-sizing: border-box;
	padding: 5px;
	display: flex;
}
.cartList .item .itemImage image {
	width: 90px;
	height: 90px;
}
.cartList .item .itemInfo {}
.itemInfoOther {
	display: flex;
}
.proname {
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.numBtn {
	width: 30px;
	height: 30px;
}
.tip {
	width: 100%;
	height: 50px;
	background-color: #efefef;
	position: fixed;
	
	bottom: 0px;
	/* #ifdef H5*/
	bottom: 50px;
	/* #endif */
	display: flex;
}
</style>
